﻿@{
    //ViewBag.Title = "Index";
    //Layout = "~/Views/Shared/_Layout.cshtml";
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ProductList</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }

        /* 卡片样式 */
        .layui-card {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        /* 按钮样式 */
        .layui-btn {
            border-radius: 3px;
            padding: 6px 12px;
            cursor: pointer;
        }

        .layui-btn-int {
            background-color: #009688;
            color: white;
        }

        .layui-btn-search {
            background-color: #409eff;
            color: white;
        }

        .layui-btn-out {
            background-color: #FF5722;
            color: white;
        }

        /* 表格样式 */
        .layui-table {
            width: 100%;
            border-collapse: collapse;
        }

            .layui-table th,
            .layui-table td {
                border: 1px solid #e6e6e6;
                padding: 8px;
                text-align: left;
            }

            .layui-table th {
                background-color: #f9f9f9;
            }

        /* 工具栏样式 */
        .layui-btn-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
        }

        .layui-form-item {
            display: flex;
            align-items: center;
        }

        .layui-form-label {
            margin-right: 10px;
        }

        .layui-input-inline {
            margin-right: 10px;
        }
    </style>

   
</head>
<body>
    <div style="padding: 16px">
        <div class="layui-card">
            <div class="layui-card-body">
                <h3>商品信息</h3>
                <table class="layui-hide" id="testProduct" lay-filter="testProduct"></table>
            </div>
        </div>

    </div>
    <script type="text/html" id="toolbarDemoProduct">
        <div class="layui-btn-container">
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-sm layui-btn-int" lay-event="int">采购</button>
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="searchname" name="ProductName" lay-verify="required" autocomplete="off" class="layui-input" style="height:35px;">
                </div>
                <button class="layui-btn layui-btn-sm layui-btn-search" lay-event="search">搜索</button>
                <button class="layui-btn layui-btn-sm layui-btn-out" lay-event="out">出库</button>
            </div>
        </div>
    </script>
    <script type="text/html" id="barDemoProduct">
        <div class="layui-clear-space">
            <button type="button" class="layui-btn layui-btn-sm" lay-event="edit">采购详情</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-event="editPrice">零售价格修改</button>
        </div>
    </script>
    <script type="text/html" id="tplImg">
        <img src="{{=d.Barcode}}" width="100" height="60" />
    </script>
    <script src="/Scripts/jquery-1.8.2.min.js"></script>
    <!--引用SignalR库-->
    <script src="/Scripts/jquery.signalR-2.4.3.min.js"></script>
    <!--引用自动生成的SignalR集线器(Hub)脚本.在运行的时候在浏览器的Source下可看到-->
    <script src="/signalr/hubs" type="text/javascript"></script>

    <script>


        var proxy = $.connection.myChatHub;
        //定义客户端的javascript
        proxy.client.RevStudents = function (json) {
            console.log("接受")
            table.reload('testProduct');
        }


        $.connection.hub.start().done(function () {
            // 连接成功
            proxy.server.sendAllStudent()
        }).fail(function (err) {
            console.error("SignalR连接失败：", err);
        });
        var table;//全局
        layui.use(['table', 'util', 'layer'], function () {
            table = layui.table;
            util = layui.util;
            layer = layui.layer;
            //第一个实例
            
            table.render({
                elem: '#testProduct'
                , url: '/Product/ProductContent'  //数据接口
                , toolbar: '#toolbarDemoProduct'
                , defaultToolbar: []
                , height: 'full-200' // 最大高度减去其他容器已占有的高度差
                , cellMinWidth: 100// 适当增大最小列宽
                , totalRow: true // 开启合计行
                , page: {
                    limit: 10
                }
                , cols: [[ //表头
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'ProductName', title: '商品名称' }
                    , {
                        field: 'Number', title: '商品数量', templet: function (d) {
                           
                     
                            if (d.Number < d.Threshold)
                                return `<span style="color: red !important;">${d.Number}</span>`;
                            else
                                return d.Number;
                        }
                    }
                    , { field: 'Threshold', title: '阈值（临界值)' }
                    , { field: 'Price', title: '零售价' }
                    , { field: 'Barcode', title: '条形码', templet: '#tplImg' }
                    , { fixed: 'right', title: '操作', width: 200, minWidth: 125, templet: '#barDemoProduct' }
                ]]
            });
            //表内事件
            table.on('tool(testProduct)', function (obj) { // 双击 toolDouble
                var data = obj.data; // 获得当前行数据

                //采购详情
                if (obj.event == 'edit') {
                    //console.log(obj.data.Id)
                    //重新写一个页面
                    layer.open({
                        type: 2,
                        content: '/product/detail/' + obj.data.Id, //这里content是一个普通的String
                        area: ['1000px', '600px']
                    });
                }
                //零售价更改
                if (obj.event == 'editPrice') {
                    //console.log(obj.data)
                    //重新写一个页面
                    layer.open({
                        type: 2,
                        content: '/product/editprice/' + obj.data.Id, //这里content是一个普通的String
                        area: ['500px', '300px']
                    });
                }
            });
            // 监听复选框选择
            let checkedData = [];
            table.on('checkbox(testProduct)', function (obj) {
                if (obj.checked) { // 选中
                    checkedData.push(obj.data);
                } else { // 取消选中
                    checkedData = checkedData.filter(function (item) {
                        return item.Id !== obj.data.Id;
                    });
                }
            });
            //工具栏事件
            //添加
            table.on('toolbar(testProduct)', function (obj) {
                if (obj.event == 'int') {
                    layer.open({
                        type: 2,
                        content: '/Product/add', //这里content是一个普通的String
                        area: ['1000px', '600px']
                    });
                }
                if (obj.event == 'out') {
                    // 编码JSON数据
                    let data = encodeURIComponent(JSON.stringify(checkedData));
                    //console.log("编码后的数据:", data);
                    layer.open({
                        type: 2,
                        title: '商品出库',
                        content: '/Product/outProduct?data=' + data,
                        area: ['1000px', '600px'],
                    });
                }
                if (obj.event == 'search') {
                    var productName = $('input[name="ProductName"]').val().trim();
                    // 执行表格重载
                    table.reload('testProduct', {
                        where: {
                            ProductName: productName
                        },
                    });
                    $('input[name="ProductName"]').val(productName);
                }
            });

        });
    </script>
</body>
</html>